<template>
  <div class="wrap-box">
    <div>共有{{ pagination.total }}条记录，每页显示{{ pagination.pageSize }}条</div>
    <div class="pagination">
      <div class="total">共有{{ pagination.total }}条</div>
      <a-pagination
        v-model:current="pagination.pageNum"
        show-quick-jumper
        showSizeChanger
        :total="pagination.total"
        :pageSize="pagination.pageSize"
        @change="onChange"
        @showSizeChange="showSizeChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { watch } from 'vue';

interface IPagination {
  pageNum: number;
  pageSize: number;
  total: number;
}

const props = withDefaults(
  defineProps<{
    pagination: IPagination;
  }>(),
  {
    pagination: () => {
      return {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
    },
  },
);

const emit = defineEmits<{
  (e: 'change', page: number, pageSize: number): void;
  (e: 'showSizeChange', current: number, pageSize: number): void;
}>();

const onChange = (page: number, pageSize: number) => {
  emit('change', page, pageSize);
};
const showSizeChange = (current: number, size: number) => {
  emit('showSizeChange', current, size);
};

watch(props.pagination, () => {
  if (props.pagination.pageNum > Math.ceil(props.pagination.total / props.pagination.pageSize) && props.pagination.total != 0) {
    emit('change', 1, props.pagination.pageSize);
  }
});
</script>

<style lang="less" scoped>
.wrap-box {
  padding: 30px 12px 12px 14px;
  display: flex;
  justify-content: space-between;
  color: #555555;
  align-items: center;
  .total {
    margin-right: 10px;
  }
  .pagination {
    display: flex;
    align-items: center;
    :deep(.ant-pagination-options-quick-jumper) {
      color: #555555;
    }
  }
}
</style>
